<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-select.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/from/global.js"></script>
    <script type="text/javascript" src="../../js/from/jquery.smart-form.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-select.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>
<body style="overflow-x: hidden">
        <p/>
        <!--<button id="btn7" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">表单绘制</button>-->
        <button id="btn8" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">设置值</button>
        <button id="btn9" class="btn btn-primary" type="button" data-dismiss="modal" aria-hidden="true">得到值</button>
        <form action="" id="itemForm1"></form>
</body>
<script>
    var form1//表单
    var userdata = [];//测试数据
    var depdata = [];//测试数据
    var Modal1;
    $(document).ready(function () {
        //绘制表单
        //$("#btn7").click(function () {
            InitForm1();
        //})
        
        $(document.body).append('<div id="modal1"></div>');
        
        Modal1 = new bsEx.Modal({
            title:"得到表单值",
            renderto:"#modal1",//绘制到div
            initMax:true//初始是否最大化
        });

         //设置值
         $("#btn8").click(function () {
            var data = {
                "taskCode": "20170101",//单号
                "taskMakedate": "2017-01-01",//日期
                "taskMakeuser": "2",//人员
                "taskMakedep": "1",//部门
                "tasknub": "30",//数量
                "taskprice": "3",//价格
                "taskfield1": "赚了好几万"//备注
            };
            form1.setFormData(data);
        })
        //得到值
        $("#btn9").click(function () {
            var str = [];
            var value = form1.getFormData();
            for (var v in value) {
                str.push(v + ":" + value[v]);
            }
            Modal1.firstInit = false;
            Modal1.body = str.join('<p/>') + "<p/>得到值后可以使用ajax提交";//内容
            Modal1.show();
        })
    });
    
    //绘制表单
    function InitForm1() {
        //清空
        $('#itemForm1').html('');
        form1 = new bsEx.ItemForm('#itemForm1');
        form1.items = [
            { type: 'text', name: 'taskCode', title: '单号' },
            { type: 'datetime', name: 'taskMakedate', title: '制单日期' },
            { type: 'select', name: 'taskMakeuser', title: '制单人', select: { data: userdata, tree: false } },
            { type: 'select', name: 'taskMakedep', title: '制单部门', select: { data: depdata, tree: true } },
            { type: 'numbertxt', name: 'tasknub', title: '数量' },
            { type: 'floattxt', name: 'taskprice', title: '价格' },
            { type: 'textarea', name: 'taskfield1', title: '备注', oneline: true }
        ];//项
        form1.colunb = 4;//列数
        form1.init();//开始显示
    }
    //得到测试数据
    (function gettestdata() {
        $.ajax({
            url: "../../Data/fromtest_user.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法 
                userdata = data;
            }
        })
        $.ajax({
            url: "../../Data/fromtest_dep.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法 
                depdata = data;
            }
        })
    })();
</script>
</html>